Angular Components
The angular components are the basic building block of an angular application. The component will contain a class that will interact with its UI html file and displays the content.
By default, angular provides us with the default component, AppComponent which will act as the entry point.
Creating angular project
Create a new angular application using
ng new angular-component
Once the application is created you can find 4 files related to the default component.
- app.component.css
- app.component.html
- app.component.spec.ts
- app.component.ts
Introduction to AppComponent
The app.component.ts file is a class that is decorated with @Component with some metadata which makes the class behave like a component. Below is the default boilerplate code of app.component.ts.
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular-component';
}
The component decorator @Component will have the following metadata.
- selector - It should be a unique name. This will replace the template of the component(
app.component.html) in any .html file. - templateUrl - Its the location of the template usually its a
htmlfile. - styleUrls - Its the array of location to the stylesheets which will be applied to the
app.component.htmlfile.
Open the app.component.html file and modify the code as below
<h1>Welcome to Angular component tutorials</h1>
Run the application using
ng serve --o
The browser screen displays the html
Welcome to Angular component tutorials.
This is because we have set the AppComponent selector to load AppComponent initially in index.html.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularComponent</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
Lets create a new component and display it in AppComponent template.
Create a component named WelcomeComponent
Create a component using the following command.
ng g c welcome
Here, g stands for generate, c stands for component and welcome is the name of the component to be created.
The above component will create a WelcomeComponent. Open the welcome.component.ts file and a new variable title with the value Readersbuddy.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-welcome',
templateUrl: './welcome.component.html',
styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent implements OnInit {
title = 'Readersbuddy';
constructor() { }
ngOnInit() {
}
}
Open the welcome.component.html file and modify the code as below.
<p>Welcome to {{title}}</p>
Using the interpolation({{}}) to display the value of the title variable in the HTML template.
It will produce the output
Welcome to Readers Buddy.
To use this, open the app.component.html file and add the selector tag of the WelcomeComponent.
<h1>Welcome to Angular component tutorials</h1>
<app-welcome></app-welcome>
Run the project
Run the app using
ng serve --o
To summarize, a component is the building block of an angular application. It can be used in three ways.
- Referring inside an HTML template using a selector string.
- It can be routed to the component which will act as separate page.
- Can be loaded dynamically in any modal dialog.